import { Table , Select,Input, Row, Button, Card } from 'antd';
import ProTable from '@ant-design/pro-table';
const { Option } = Select;
import React, { useState} from 'react';
import styles from '../style.less'
const conditionEnum = {
  all: '全部',
  one:  '联动条件1',
  two: '联动条件2',
  three: '联动条件3',
};


const Configure: React.FC = () => {
   type TableListItem = {
    ID: number;
    task: string;
    condition: string;
    result: string;
  };
  const dataSource : TableListItem[] = [];
  for (let i = 0; i < 2; i += 1) {
    dataSource.push( {
      ID: i ,
      task:'联动任务',
      condition: '联动条件',
      result: '联动结果',
    })

  }


  const columns = [
    {
      title: 'ID',
      dataIndex: 'ID',
      valueType: 'index',
    },
    {
      title: '联动任务',
      dataIndex: ' task',
      valueType: 'string',
    },
    {
      title: '联动条件',
      dataIndex: 'condition',
      valueType: 'select',
    
      initialValue: ['all'],
      conditionEnum,
    },
    {
      title: '联动结果',
      dataIndex: 'result',
      valueType: 'string',
    } ,{
      title: '操作',
      key: 'ID',
     
      valueType: 'option',
      render: (_, row, index, action) => [
        <a
          key="a"
          onClick={() => {
            action?.startEditable(row.ID);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];




    return (
      <div className={styles.linkage}>
        <Card>   
          <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>联动配置</span></Row>
          
          <Row style={{    margin: '12px 0 20px'}}> 
        <div  className={styles.inputBg} >
           <Input placeholder="请输入联动任务"/>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false}  style={{ width: 'auto',minWidth: 120 }} placeholder="请选择联动条件"  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
               <Option value=""  >全部联动条件</Option>
                <Option value="week">联动条件1</Option>
                <Option value="month">联动条件2</Option>
                <Option value="quarter">联动条件3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false} style={{ width: 'auto',minWidth: 120 }} placeholder="请选择联动结果"   dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
               <Option value=""  >全部联动结果</Option>
                <Option value="week">联动结果1</Option>
                <Option value="month">联动结果2</Option>
                <Option value="quarter">联动结果3</Option>
            </Select>
          </div>
          <Button type="primary" style={{marginRight:'15px'}} >增加</Button>
          <Button type="primary"   >修改</Button>
       
         </Row>
        </Card> 
        <Card style={{marginTop:'24px'}}>   
          <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>联动查询</span></Row>
          <Row style={{    margin: '12px 0 20px'}}> 
            <div  className={styles.inputBg} >
              <Select  bordered={false}  style={{ width: 'auto',minWidth: 120 }} placeholder="请选择联动条件"  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部联动条件</Option>
                <Option value="week">联动条件1</Option>
                <Option value="month">联动条件2</Option>
                <Option value="quarter">联动条件3</Option>
              </Select>
            </div>
            <div  className={styles.inputBg} >
              <Select  bordered={false} style={{ width: 'auto',minWidth: 120 }}  placeholder="请选择联动结果"   dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部联动结果</Option>
                <Option value="week">联动结果1</Option>
                <Option value="month">联动结果2</Option>
                <Option value="quarter">联动结果3</Option>
              </Select>
            </div>
            <Button type="primary"   className={styles.searchBtnBg}  style={{marginRight:'15px'}} >修改</Button>
            <Button type="primary"  className={styles.searchBtnBg}  style={{marginRight:'15px'}} >导入</Button>
            <Button type="primary"  className={styles.searchBtnBg}  style={{marginRight:'15px'}} >导出</Button>
            <Button type="primary"   className={styles.searchBtnBg}   >全部删除</Button>
       
         </Row>
        
          <ProTable<TableListItem>
              dataSource={dataSource}
          columns={columns}
          toolBarRender={false}
          search={false}
          rowSelection={{ }}
          pagination={{  // 分页
            position:['bottomCenter']  ,
        
            showTotal:total => `共 ${total} 项`
            //simple:true
          }}
          rowKey="ID" />
        </Card> 
       
      
  </div>
    );
};

export default Configure;